<template>
  <!--采购设备订单-->
  <div style="padding: 20px;">
    <el-card class="box-cardtg">
      <el-button @click="handleNew">新增</el-button>
      <el-button @click="handleDelete">删除</el-button>
      <el-input placeholder="请输入设备编号或名称" clearable prefix-icon="el-icon-search" suffix-icon="el-icon-s-cale"
        style="width: 250px;margin-left: 660px;" />
      <el-popover placement="right" width="400" trigger="click">
        <svg-icon icon-class="caiss" style="width: 40px; height: 20px;" class="pointer" slot="reference" />
      </el-popover>
      <el-table size="small" :data="filteredData" style="width: 100%; margin-top: 20px;" @cell-click="cellHandleclick"
        :cell-style="tableCellStyle">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="序号" label="序号" width="50" />
        <el-table-column label="操作" width="80">
          <template v-slot="scope">
            <el-button type="text" @click="handleView(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="100" align="center" />
        <el-table-column prop="code" label="采购单号" width="180" align="center" />
        <el-table-column prop="procurementTopics" label="采购主题" width="180" align="center" />
        <el-table-column prop="datePurchase" label="采购日期" width="100" align="center" />
        <el-table-column prop="relevancy" label="关联采购申请" width="180" align="center" />
        <el-table-column prop="purchasingStaff" label="采购人员" width="100" align="center" />
        <el-table-column prop="department" label="采购部门" width="100" align="center" />
        <el-table-column prop="contact" label="联系方式" width="100" align="center" />
        <el-table-column prop="vendor" label="供货商" width="100" align="center" />
        <el-table-column prop="merchant" label="联系人" width="100" align="center" />
        <el-table-column prop="contact2" label="联系方式" width="100" align="center" />
        <el-table-column prop="contact2" label="采购数量" width="100" align="center" />
        <el-table-column prop="contact2" label="采购总金额" width="140" align="center" />
        <el-table-column prop="remark" label="备注" width="100" align="center" />
      </el-table>
      <el-pagination background :current-page.sync="currentPage" :page-size="pageSize" :total="total"
        layout="prev, pager, next, sizes, total" :page-sizes="[10, 20, 30, 50]" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script>
import { SelectListOrder } from "@/api/eastjet-maintenance/caig/cai";
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 45,
      searchText: '',
      filteredData: [],
      currentPage: 1,
      pageSize: 10,
      form: {
        code: '',
        pan: "1"
      }
    }
  },
  computed: {
    filteredData() {
      return this.data.filter(item => {
        return item.采购单号.includes(this.searchText) || item.采购主题.includes(this.searchText);
      }).slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
    },
    total() {
      return this.data.length;
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      SelectListOrder(this.form, this.currentPage, this.pageSize).then((res) => {
        console.log("数据", res)
        this.filteredData = res.data.data.list
        this.total = res.data.data.total
      })
    },
    handleSizeChange(size) {
      this.pageSize = size;
      SelectListOrder(this.form, this.currentPage, this.pageSize).then((res) => {
        console.log("数据", res)
        this.filteredData = res.data.data.list
        this.total = res.data.data.total
      })
      console.log(`每页 ${size} 条`);
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      SelectListOrder(this.form, this.currentPage, this.pageSize).then((res) => {
        console.log("数据", res)
        this.filteredData = res.data.data.list
        this.total = res.data.data.total
      })
      console.log(`当前页: ${page}`);
    },
    // 改变某一列单元格背景颜色
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.label === '关联采购申请') {
        //第3列字体颜色是红色
        return 'color:red;!important;'
      }
    },
    cellHandleclick(row, column, cell, event) {
      //如果规定点击某一列执行，利用column中的label属性
      if (column.label === '关联采购申请') {
        //执行逻辑
        alert(11)
      }
    },
    handleSearch() {
      this.currentPage = 1;
    },
    handleNew() {
      // 处理新增操作
      this.$router.push({ path: '/sb/yan/ding/xin' })
    },
    handleDelete() {
      // 处理删除操作
    },
    handleView(row) {
      // 查看具体信息
      this.$router.push({ path: '/sb/yan/ding/cha', query: { code: row.code } })
    },
    handlePageChange(page) {
      this.currentPage = page;
    }
  }
}
</script>

<style>
/* 自定义样式 */
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-cardtg {
  width: 1210px;
  margin-left: 14px;
}
</style>
